<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        body {
            background: rgba(245, 245, 245, 1);
            padding-top: 50px;
            padding-bottom: 56px;
        }

        .m-nav-mod {
            z-index: 999;
            position: fixed;
            top: 0;
            width: 100%;
            height: 50px;
            background: rgba(90, 194, 255, 1);
        }

        .c-nav-item {
            position: relative;
            font-size: 15px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.8);
        }

        .c-nav-item::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background: rgba(255, 255, 255, 1);
            border-radius: 2px;
        }

        .c-nav-active {
            font-size: 16px;
            font-weight: 600;
            color: rgba(255, 255, 255, 1);
            overflow: visible !important;
        }

        .m-order-mod {
            margin: 15px;
            padding: 0 15px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.02);
            border-radius: 8px;
        }

        .m-order-mod:last-of-type {
            margin-bottom: 0;
        }

        .o-order-header {
            position: relative;
            height: 50px;
        }

        .o-order-header::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background-color: rgb(231, 230, 230);
            transform: scaleY(0.5);
        }

        .c-order-id {
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
        }

        .c-order-state-default {
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
        }

        .c-order-state-highlight {
            font-size: 15px;
            font-weight: 400;
            color: rgba(231, 109, 0, 1);
        }

        .o-order-list {
            position: relative;
            padding-bottom: 15px;
        }

        .o-order-list::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background-color: rgb(231, 230, 230);
            transform: scaleY(0.5);
        }

        .o-order-goods {
            height: 80px;
            margin-top: 15px;
        }

        .c-goods-img {
            width: 60px;
            min-width: 60px;
            height: 80px;
            margin-right: 12px;
        }

        .c-goods-name {
            font-size: 14px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        .o-goods-sub {
            margin-top: 10px;
            height: 18px;
        }

        .c-goods-des {
            font-size: 12px;
            font-weight: 400;
            color: rgba(191, 191, 191, 1);
        }

        .c-goods-count {
            font-size: 14px;
            font-weight: 400;
            color: rgba(191, 191, 191, 1);
        }

        .c-goods-price {
            margin-top: 10px;
            height: 20px;
            font-size: 14px;
            font-weight: 600;
            color: rgba(255, 101, 24, 1);
            line-height: 20px;
        }

        .o-order-footer {
            padding: 25px 0;
        }

        .o-order-pay {
            height: 16px;
        }

        .c-order-paytips {
            margin-right: 5px;
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
        }

        .c-order-prices {
            font-size: 18px;
            font-weight: 500;
            color: rgba(255, 101, 24, 1);
        }

        .o-order-btns {
            margin-top: 14px;
            height: 32px;
        }

        .c-order-btn-default {
            padding: 0 20px;
            height: 32px;
            border-radius: 18px;
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
            border: 1px solid rgba(25, 25, 25, 1);
            margin-left: 15px;
            white-space: nowrap;
        }

        .c-order-btn-highlight {
            padding: 0 20px;
            height: 32px;
            border-radius: 18px;
            background: rgba(253, 155, 67, 1);
            font-size: 15px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            margin-left: 15px;
            white-space: nowrap;
        }

        .order-tips {
            margin-top: 150px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="m-nav-mod" data-flex="cross:center">
            <div v-for="item in tabs" 
                 class="c-nav-item" 
                 :class="{'c-nav-active': status === item.status}"
                 data-flex-box="1" 
                 data-flex="main:center"
                 @click="status = item.status">
                {{item.text}}
            </div>
        </div>
        <div class="order-tips" v-if="listData.length === 0">
            没有更多数据了
        </div>
        <div class="m-order-mod" v-for="item,index in listData" @click="handelItem(item, index)">
            <div class="o-order-header" data-flex="main:justify cross:center">
                <div class="c-order-id" v-if="status == 20">
                    {{ item.type == 1 ? '退款' : '换货' }}
                </div>
                <div class="c-order-id" v-else>
                    订单编号: {{ item.orderSn }}
                </div>
                <div :class="item.statusClass || 'c-order-state-default'">
                    {{item.statusText}}
                </div>
            </div>
            <div class="o-order-list">
                <div class="o-order-goods" v-for="goods in item.orderItemList" data-flex>
                    <img class="c-goods-img" :src="goods.productPic" alt="">
                    <div data-flex-box="1">
                        <div class="c-goods-name">{{ goods.productName }}</div>
                        <div class="o-goods-sub" data-flex="main:justify">
                            <div class="c-goods-des">{{ goods.productAttr }}</div>
                            <div class="c-goods-count">x{{ goods.productQuantity }}</div>
                        </div>
                        <div class="c-goods-price">¥{{ goods.productPrice }}</div>
                    </div>
                </div>
            </div>
            <div class="o-order-footer">
                <div class="o-order-pay" data-flex="main:right cross:center">
                    <div class="c-order-paytips">{{ item.status == 12 ? '待付款:' : '实付款:' }}</div>
                    <div class="c-order-prices">¥{{ item.payAmount || item.orderAmount || '' }}</div>
                </div>
                <div class="o-order-btns" v-if="item.btns.length > 0" data-flex="main:right cross:center">
                    <div v-for="btn in item.btns" 
                         :class="btn.className || 'c-order-btn-default'" 
                         data-flex="main:center cross:center" 
                         @click.stop="fnHandleOrderBtn(btn, item, index)">
                        {{btn.name}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/service/service-order.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm, status;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        status = api.pageParam.status;
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        fnInit();
    };

    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                status: Number(status),
                listData: [],
                tabs: [
                    {
                        text: '全部',
                        status: 0
                    },
                    {
                        text: '待支付',
                        status: 12
                    }, 
                    {
                        text: '待发货',
                        status: 2
                    }, 
                    {
                        text: '待收货',
                        status: 3
                    },
                    {
                        text: '退款售后',
                        status: 20
                    }
                ],
                pageNo: 1,
                pageSize: 10,
                isSellService: false
            },
            watch: {
                status: function() {
                    getPageData('headerRefreshing');
                }
            }
        });
        fnGetSellService();
    }

    // 获取是否允许售后
    function fnGetSellService() {
        var params = {
            id: '1',
            entityName: 'omsOrderSetting'
        };
        var callback = function(data) {
            vm.isSellService = data.serviceStatus == 1;
            load();
        };
        POST('common/get', params, callback)
    }

    function load() {
        getPageData('headerRefreshing');
        fnAddHeaderRefreshingEvent(function () { //设置下拉刷新
            getPageData('headerRefreshing');
        });

        fnAddFooterLoadingEvent(function () { // 设置上拉加载
            getPageData('load');
        });
    }

    // 获取订单列表
    function getPageData(sign) {
        if (sign == 'headerRefreshing') {
            vm.pageNo = 1;
        } else {
            vm.pageNo++;
        };
        var url = 'single/oms/order/list';
        var params = {
            'status': vm.status,
            'pageNum': vm.pageNo,
            'pageSize': vm.pageSize
        };
        if(params.status == 20) {
            url = 'single/oms/order/aftersaleslist';
            delete params.status; 
        }
        var callback = function (data) {
            if (vm.pageNo == '1') {
                vm.listData = [];
            }
            var listData = data.records;
            for (var i = 0; i < listData.length; i++) {
                var item = listData[i];
                formateOrderItem(item);
            };
            api.refreshHeaderLoadDone();
            vm.listData = vm.listData.concat(listData);
            // status 为200时,只返回data
        };
        MALLGET(url, params, callback);
    }

    // 订单事件处理结果回调
    // status: true 成功 false 失败
    // event: 参考service-tools.js 834行
    // index: 列表上的第几个订单
    function orderEventCallback(status, event, index) {
        console.error('list==status==='+ status +'===event==='+ event);
        getPageData('headerRefreshing');
        // var list = deepCopy(vm.listData),
        //     item = list[index];
        // switch(event) {
        //     case 'cancle':
        //         item.status = 15;
        //         vm.$set(vm.listData, index, item);
        //         // 取消订单
        //         break;
        //     case 'recieveGoods':
        //         // 确认收货
        //         break;
        //     case 'deteleOrder':
        //         // 删除订单,返回上一页
        //         break;
        //     case 'cancelSellService':
        //         // 取消申请售后
        //         break;
        //     case 'invoice':
        //         // 申请开票
        //         break;
        //     case 'sellService':
        //         // 申请售后
        //         break;
        //     case 'pay':
        //         // 支付成功
        //         break;
        // }
        // vm.listData = list;
    }

    // 处理订单数据
    function formateOrderItem(sender) {
        // if(sender.status == 6 || sender.status == 7) {
        //     sender.status = 5;
        // }
        // 状态文字
        if(vm.status == 20 || (vm.status == 0 && (sender.status == 6 || sender.status == 7))) {
            sender.statusText = fnOrderStatusText(vm.status + '' + sender.status);
            if(sender.type == '1' && sender.status == '1') {
                sender.statusText = '退款中';
            }
            sender.btns = [];
            return sender;
        } else {
            sender.statusText = fnOrderStatusText(sender.status);
        }
        // ====> 订单按钮获取开始
        sender.btns = [];
        if(sender.status == '12') {
            sender.statusClass = 'c-order-state-highlight';
            // 待支付: 取消和支付
            sender.btns = ['cancle', 'pay'];
        }else if(sender.status == '3') {
            // 待收货：查看物流和确认收货
            sender.btns = ['logistics', 'recieveGoods'];
        }else if(sender.status == '4' && vm.isSellService) {
            // 已收货：申请售后
            sender.btns = ['sellService'];
        }else if(sender.status == '5' && sender.invoiceStatus === '-1') {
            //  已完成：申请开票
            sender.btns = ['invoice'];
        } else if(sender.status == '5' && sender.invoiceStatus === '1') {
            sender.btns = ['reInvoice'];
        } else if(sender.status == '5' && (sender.invoiceStatus !== '-1' ||  sender.invoiceStatus !== '1')) {
            sender.btns = [];
        }
        if(sender.btns.length > 0) {
            sender.btns = fnOrderStatusBtns(sender.btns);
        }
        // ====> 订单按钮获取结束
        return sender;
    }

    function handelItem(item, index) {
        var status;
        if(vm.status == 0 && (item.status == 6 || item.status == 7)) {
            // 如果订单状态是维权中和维权完成
            var url = 'common/get';
            var params = {
                "entityName": "omsOrderReturnApply",
                "orderId": item.id
            };
            var callback = function(data) {
                fnOpenPublicWin('订单详情','teacher/order_detail', {
                    _status: item.status,
                    // 这是子类型, 用于区分到底是换货还是退货
                    _type: String(typeof item.type === 'number' ? item.type : '') ? '_' + item.type : '',
                    // 这是父状态, 例如退款售后的状态s
                    status: 20,
                    id: data.id,
                    // 这是开票状态
                    invoiceStatus: item.invoiceStatus,
                    orderIndex: index
                });
            };
            POST(url, params, callback);
            return;
        } else if(vm.status == 0) {
            // 如果当前时全部订单
            status = item.status;
        } else {
            // 如果当前是待支付、待发货、待收货
            status = vm.status;
        }
        fnOpenPublicWin('订单详情','teacher/order_detail', {
            // 这是子状态, 例如退款售后中的子状态
            _status: vm.status === 20 ? item.status : '',
            // 这是子类型, 用于区分到底是换货还是退货
            _type: String(typeof item.type === 'number' ? item.type : '') ? '_' + item.type : '',
            // 这是父状态, 例如退款售后的状态s
            status: status,
            id: item.id,
            // 这是开票状态
            invoiceStatus: item.invoiceStatus,
            orderIndex: index
        });
    }
</script>

</html>